// 店铺销量排行榜
<template>
    <div class="gradient-content store full-width full-height">
        <el-table :data="tableData" :max-height="height">
            <el-table-column label="产品名称" prop="product_name" min-width="180">
                <template slot-scope="scope">
                    <div class="ellipsis-2">{{ scope.row.product_name }}</div>
                </template>
            </el-table-column>
            <el-table-column label="产品图片" min-width="90">
                <template slot-scope="scope">
                    <ImageUploadImg v-model="scope.row.product_images" :readOnly="true"></ImageUploadImg>
                </template>
            </el-table-column>
            <el-table-column label="SPU" prop="spu" min-width="100"></el-table-column>
            <el-table-column label="单价" prop="total_price" min-width="100" sortable></el-table-column>
            <el-table-column label="件数" prop="skuquantity" min-width="100" sortable></el-table-column>
            <el-table-column label="成交额$" prop="spu_sales" min-width="100" sortable></el-table-column>
            <el-table-column label="销售占比" prop="spu_rate" min-width="100"></el-table-column>
            <!-- <el-table-column label="增长率" prop="GrowthRate" min-width="100"></el-table-column> -->
            <!-- <el-table-column label="时间" prop="createtime" min-width="160"></el-table-column> -->
        </el-table>
    </div>
</template>

<script>
export default {
    props: {
        tableData: {
            type: Array,
            default: () => [],
        },
    },
    watch: {
        chartData(val) {
            this.chart.changeData(val)
        },
    },
    data() {
        return {
            chart: null,
            height: 0,
        }
    },
    mounted() {
        this.$nextTick(() => {
            const boxContElement = document.querySelector(`.gradient-content.store`)
            this.height = boxContElement.clientHeight
        })
    },

    methods: {},
}
</script>
<style scoped>
.el-table {
    color: #fff;
    background: transparent;
}
::v-deep .el-table tr {
    background: transparent;
}
::v-deep .el-table th.is-leaf,
::v-deep .el-table td {
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
.el-table::before {
    background: rgba(255,255,255,0.3);
}
::v-deep .el-table .el-table__row:hover {
    background: rgb(16, 25, 80);
}
::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
    background: rgb(16, 25, 80);
}
::v-deep .el-table .el-table__header-wrapper th {
    color: #fff;
    background: transparent;
}
::v-deep .el-table .el-table__header-wrapper th:hover {
    background: rgb(16, 25, 80);
}
.ellipsis-2 {
    width: 100%;
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>
